<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h2>Update css skills <span class="hl">JS</span></h2>
    <div class="controls">
        <div class="fields">
            <label for="spacing">spacing</label>
            <!-- 输入控件  html5 更加强大的表单类型 -->
            <input type="range" min="0" max="100" id="spacing" name="spacing" value="100" data-sizing="px"><span id="spacing__res">50</span>
        </div>
        <div class="fields">
            <label for="color">spacing</label>
            <!-- 输入控件  html5 更加强大的表单类型 -->
            <input type="color" id="blur" name="color" value="100" data-num=2><span id="blur__res">150px</span>
        </div>
    </div>

    <script>
        const inputs = document.querySelectorAll('.fields input');
        // console.log(inputs);
        const spacingInput = document.querySelector('#spacing');
        const spacing__res = document.querySelector('#spacing__res');
        const blur__res = document.querySelector('#blur__res');
        const blurInput = document.querySelector('#blur');
        inputs.forEach(function(input) {
                input.addEventListener('change', function() {
                    // console.log(this);
                    const res = '#' + this.id + '__res';
                    // console.log(res);
                    document.querySelector(res).innerText = this.value +
                        (this.dataset.sizing ? this.dataset.sizing : ' ');
                });
            })
            // .addEventListener('change', function() {
            //     console.log(this);
            // });

        // spacingInput.addEventListener('change', function(event) {
        //     // js 是事件驱动的语言
        //     // 事件处理函数中，this 指向事件发生的对象
        //     console.log(event.target.value, this.value); // 都可以获取value 相等

        //     spacing__res.innerHTML = event.target.value + this.dataset.sizing;
        // });
        // blurInput.addEventListener('change', function(event) {
        //     blur__res.innerHTML = event.target.value + this.dataset.sizing;

        // });
    </script>
</body>

</html>